<template>
  <!-- 化学热处理 -->
  <div style="position: relative">
    <!-- :key="brder1Key" -->
    <div id="equipmentAdminBox" v-init-screen-h="0" class="equipmentAdmin_box">
      <div class="content">
        <div class="content_top flex-x flex-top" style="height: 65%">
          <div style="width: 60%; height: 100%" class="">
            <!--  能耗信息 -->
            <AreaList
              :number="tempAreaCount"
              :key="brder1Key + 4"
              style="width: 100%; height: 50%"
            />
            <!-- 设备运行信息 -->
            <dv-border-box-12
              :key="brder1Key + 5"
              style="padding: 10px 10px 5px 10px; height: 50%"
              class="msg_content"
            >
              <div class="flex-x flex-wrap h-full">
                <!-- 算出每一行的高度 -->
                <div
                  class="flex-x flex-wrap"
                  :style="{
                    width: '33%',
                    height: `${100 / Math.ceil(renderJsonDownArea.length / 3)}%`
                  }"
                  v-for="(item, index) in renderJsonDownArea"
                  :key="index"
                >
                  <ContentField
                    :imgUrl="item.imgUrl"
                    :title="item.ch_Text"
                    :content="item.areaName"
                  ></ContentField>
                </div>
              </div>
            </dv-border-box-12>
          </div>

          <!-- 实时曲线图 -->
          <!-- :brder1Key="brder1Key + 1" -->
          <RealTimeChart
            :brder1Key="brder1KeyChart + 1"
            ref="realChart"
            style="height: 100%; width: 40%"
          />
        </div>
        <!-- 任务号,远程监控 -->
        <div
          class="content_bottom flex-x flex-top"
          style="height: 35%; width: 100%"
        >
          <!-- 任务号 -->
          <SinteringTaskNumber
            :key="brder1Key + 2"
            style="width: 60%; height: 100%"
          />
          <!-- 远程监控 -->
          <RemoteMonitoring
            :key="brder1Key + 3"
            manufacture-site="真空熔注"
            style="width: 40%; height: 100%"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import _ from "lodash";
import { generateId } from "@/utils";
import RealTimeChart from "../vacuumFurnace/components/RealTimeChart.vue";

import SinteringTaskNumber from "../components/SinteringTaskNumber.vue";
import RemoteMonitoring from "../components/RemoteMonitoring.vue";
import AreaList from "../components/AreaList.vue";

import { DEVICE_STATE } from "../../workshopOperation/constant";
import { mapGetters } from "vuex";
import ContentField from "../components/ContentField.vue";
import { renderJson, MAP_DEATIL_PREHEAT } from "../constant";
export default {
  components: {
    ContentField,
    AreaList,
    RemoteMonitoring,
    RealTimeChart,
    SinteringTaskNumber
  },
  data() {
    return {
      monitorDrawerShow: false,
      drawerShow: false,
      brder1Key: generateId(),
      brder1KeyChart: generateId()
    };
  },
  watch: {
    // 有bug 晚点改
    "$store.state.app.sidebar.opened"(val, oldVal) {
      setTimeout(() => {
        this.brder1Key = generateId();
        this.brder1KeyChart = generateId();
      }, 300);
    }
  },
  computed: {
    _chartKeys() {
      return this.controlDeviceInfo._chartKeys;
    },
    // 设备toekn
    deviceToken() {
      return this.controlDeviceInfo.token;
    },
    tempAreaCount() {
      return this.controlDeviceInfo._tempAreaCount || 0;
    },
    // 获取下一部分
    renderJsonDownArea() {
      if (
        JSON.stringify(this.controlDeviceInfo) !== "{}" &&
        this.controlDeviceInfo._msgContentList
      ) {
        return renderJson(this.area123, this.controlDeviceInfo._msgContentList)
          ?.downArea;
      } else {
        return [];
      }
    },
    ...mapGetters(["area123", "controlDeviceInfo"]),
    getStatus() {
      return DEVICE_STATE.find(item => item.value == this.area123.value)?.label;
    }
  },
  async mounted() {},
  destroyed() {},
  methods: {}
};
</script>

<style lang="scss" scoped>
.equipmentAdmin_box {
  // background: url(../../../assets/images/applicationCenter/app_bg.jpg) no-repeat
  //   100%;
  background-size: cover;
  color: #fff;
  position: relative;
  width: 100%;
  height: 100%;

  .left {
    width: 16%;
    height: 100%;
  }

  .content {
    height: 100%;
  }

  // .content_bottom {
  // }
}
</style>
